{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <script src="{% static 'js/raphael-2.1.4.min.js' %}"></script>
    <script src="{% static 'js/justgage.js' %}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var gg1 = new JustGage({
                id: "gg1",
                value: {{ value }},
                symbol: '%',
                min: 0,
                max: 100,
                donut: true,
                gaugeWidthScale: 0.6,
                counter: true
            });
        });
    </script>

</head>
<body style='background-color: whitesmoke;background: url("{% static 'images/bg.jpg' %}") none'>

<div style="text-align: center;margin-top: 100px">
    <h2>谣言检测系统</h2>
</div>
<div class="row" style="margin-top: 25px">
    <div class="col-lg-3 col-md-3 col-sm-3"></div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <form action="/rumor_system/index" method="post">
            <div class="input-group">
                <input type="text" name="keyword" value="{{ content }}" class="form-control" placeholder="请输入要查询的谣言">

                <span class="input-group-btn">
        <button class="btn btn-primary" type="submit">查询</button>
      </span>
            </div>
        </form>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3"></div>
</div>
{% if content %}
    <div class="row" style="margin-top: 50px">
        <div class="col-lg-3 col-md-3 col-sm-3"></div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    检测结果
                </div>
                <div class="panel-body">
                    <div>
                        <h3>谣言可能性</h3>
                        <div>
                            <div id="gg1" class="gauge" style="margin: auto 0"></div>
                            <div style="text-align: center">
                   <span>鉴定结果：
                       {% if value >= 90 %}
                           <span style="font-size:15px;font-weight: bolder; color: red">谣言</span>
                       {% elif value >= 80 %}
                           <span style="font-size:15px;font-weight: bolder; color: gold">非常可能是谣言</span>
                       {% elif value >= 60 %}
                           <span style="font-size:15px;font-weight: bolder; color: purple">很可能是谣言</span>
                       {% elif value >= 10 %}
                           <span style="font-size:15px;font-weight: bolder; color: deepskyblue">有点可能是谣言</span>
                       {% else %}
                           <span style="font-size:15px;font-weight: bolder; color: green">非谣言</span>
                       {% endif %}
                   </span>
                            </div>
                        </div>
                        {% if results %}
                            <b>参考证据</b>
                            <ul>
                                {% for result in results %}
                                    <li><a href="{{ result.url }}" target="_blank">{{ result.title }}</a></li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3"></div>
    </div>
{% endif %}
</body>
</html>